<template>
	<view class="page">
		<view class="user-box">
			<view :style="{height:statusBarHeight+'px'}"></view>
			<view class="qrcode-box">
				<!-- <i class="fal fa-qrcode" /> -->
				<i class="v5-icon fa fa-qrcode" @click="handleGoQRcode"></i>
			</view>
			<view class="user-box-info">
				<u-avatar :customStyle="{marginTop: '100rpx'}" :size="75" shape="square" src="https://a.520gexing.com/uploads/allimg/2023092410/3ebjxvmlacw.jpg"></u-avatar>
				<!-- <image src="../../static/logo.png" mode=""></image> -->
				<text class="user-box-info-username">GVIM</text>
				<text class="user-box-info-phone">155555555555</text>
			</view>
		</view>
		<view class="setting-box">
			<u-cell
				@click="handleGoAccount"
				:iconStyle="{color:'#42b883',fontSize:'25px',margin:'0 10rpx 0 10rpx'}"
				size="large"
				:border="false"
				:customStyle="{height:'50px',borderBottom:'0.1px solid #eee',borderTop:'0.1px solid #eee'}" icon="lock-fill" title="账号与安全" :isLink="true"></u-cell>
			<u-cell
				@click="handleGoWallet"
				:iconStyle="{color:'#42b883',fontSize:'25px',margin:'0 10rpx 0 10rpx'}"
				size="large"
				:border="false"
				:customStyle="{height:'50px',borderBottom:'0.1px solid #eee'}"
				icon="rmb-circle-fill"
				title="钱包"
				:isLink="true"
			></u-cell>
			<u-cell
				@click="handleGoUserInfo"
				:iconStyle="{color:'#42b883',fontSize:'25px',margin:'0 10rpx 0 10rpx'}"
				size="large"
				:border="false"
				:customStyle="{height:'50px',borderBottom:'0.1px solid #eee'}"
				icon="account-fill"
				title="个人资料"
				:isLink="true"
			></u-cell>
			<u-cell
				@click="handleGoSetting"
				:iconStyle="{color:'#42b883',fontSize:'25px',margin:'0 10rpx 0 10rpx'}"
				size="large"
				:border="false"
				:customStyle="{height:'50px',borderBottom:'0.1px solid #eee'}"
				icon="setting-fill"
				title="设置"
				:isLink="true"
			></u-cell>
		</view>
	</view>
</template>

<script setup>
import {ref} from "vue"
let statusBarHeight = ref(0)
function handleGoAccount(){
	uni.navigateTo({
		url:"/pagesD/account/index"
	})
}
function handleGoWallet(){
	// uni.navigateTo({
	// 	url:"/pagesD/wallet/index"
	// })
	uni.showModal({
		title:"提示",
		content:"暂未开放",
		showCancel:false
	})
}
function handleGoUserInfo(){
	uni.navigateTo({
		url:"/pagesD/personal/index"
	})
}
function handleGoSetting(){
	uni.navigateTo({
		url:"/pagesD/setting/index"
	})
}
function handleGoQRcode () {
	uni.navigateTo({
		url: "/pagesD/qrcode/index"
	})
}
uni.getStorage({
	key:"statusBarHeight",
	success: (res) => {
		statusBarHeight.value = Number(res.data)
	}
})
</script>

<style lang="scss" scoped>
.user-box {
	height: 500rpx;
	background-image: linear-gradient(to bottom, #4cf7b1 1%,#ffffff 99%);
	.qrcode-box{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		i {
			color: #ffffff;
			margin-top: 10rpx;
			margin-right: 40rpx;
			font-size: 50rpx;
		}
	}
	.user-box-info{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		image{
			margin-top: 100rpx;
			width: 180rpx;
			height: 180rpx;
			border-radius: 10px;
		}
		text{
			font-size: 35rpx;
		}
		.user-box-info-username{
			margin: 20rpx 0 20rpx 0;
			font-size: 40rpx;
			font-weight: bold;
		}
		.user-box-info-phone{
			color: gray;
		}
	}
}
.setting-box{
	margin-top:200rpx;
}
</style>